﻿<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>交叉报表：实现汇总报表向明细报表的透视(Drilldown) - WEB HTML5报表演示</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

	<script src="../grhtml5-6.6-min.js" type="text/javascript"></script>

    <script type="text/javascript">
        var reportViewer;

        //在网页初始加载时启动报表的运行显示
        function window_onload() {
            reportViewer = window.rubylong.grhtml5.insertReportViewer("report_holder", "../../grf/SummaryToDetail/Crosstab.grf", "");

            reportViewer.report.OnInitialize = OnInitialize;

            reportViewer.options.selectionCell = true; //设置选中方式为单元格

            btnRefresh_onclick();
        }

        function OnInitialize() {
            var report = reportViewer.report,
                BeginDate = document.getElementById("txtBeginDate").value,
                EndDate = document.getElementById("txtEndDate").value;

            //特别注意：报表可视元素交互事件必须定义在报表的初始化事件里，此时报表模板已经载入，各个元素才变得可以使用
            //定义报表交互事件，实现报表穿透查询
            report.ColumnByName("CompanyName").ContentCell.ondblclick = ondblclickListCell; //列表列的单元格
            report.ColumnByName("City").ContentCell.ondblclick = ondblclickGroupMergedCell; //分组合并单元格
            report.ColumnByName("Data").ContentCell.ondblclick = ondblclickDataCell;        //交叉数据列单元格
            report.ColumnByName("Subtotal").ContentCell.ondblclick = ondblclickSubtotalCell;//小计列单元格
            report.ColumnByName("Total").ContentCell.ondblclick = ondblclickTotalCell;      //合计列单元格

            //根据查询参数更新报表付标题，设置报表中的对应静态框的“Text”属性
            report.ControlByName("SubTitle").AsStaticBox.Text = "日期范围：" + BeginDate + "至" + EndDate;
        }

        function ondblclickListCell(evt, cell) {
            var report = reportViewer.report,
                recordset = report.RunningDetailGrid.Recordset,
                CompanyName = recordset.Fields.Item("CompanyName").AsString,
                URL = getDrilldownBaseURL() + "&CompanyName=" + CompanyName;

            window.open(encodeURI(URL), "_blank"); //根据URL打开明细报表
        }

        function ondblclickGroupMergedCell(evt, cell) {
            var report = reportViewer.report,
                recordset = report.RunningDetailGrid.Recordset,
                City = recordset.Fields.Item("City").AsString,
                URL = getDrilldownBaseURL() + "&City=" + City;

            window.open(encodeURI(URL), "_blank"); //根据URL打开明细报表
        }

        function ondblclickDataCell(evt, cell) {
            // getClickedCellHCrossFieldValue 获取到最近点击单元格对应的横向交叉字段的值
            // getClickedRow 获取到当前点击行的信息，行类型有内容行(content)、分组头(groupheader)与分组尾(groupfooter)三种
            var report = reportViewer.report,
                runningDetailGrid = report.RunningDetailGrid,
                recordset = runningDetailGrid.Recordset,
                crossProductID = report.DetailGrid.CrossTab.getClickedCellHCrossFieldValue("ProductID"), //点击单元格对应的横向交叉字段值
                clickedRow = runningDetailGrid.getClickedRow(),  //最近点击行信息
                rowType = clickedRow.type,
                URL = getDrilldownBaseURL() + "&ProductID=" + crossProductID,
                doDrilldown = true;

            if (rowType === "content") {
                //增加当前行对应的公司名称字段值作为穿透参数
                URL += "&CompanyName=" + recordset.Fields.Item("CompanyName").AsString;
            }
            else if (rowType === "groupheader") {
                doDrilldown = false; //没有对应穿透任务需要执行
            }
            else if (clickedRow.type === "groupfooter") {
                if (clickedRow.groupIndex === 0) {
                    //不需要设置额外的过滤参数
                }
                else if (clickedRow.groupIndex === 1) {
                    //增加当前分组项对应的城市字段值作为穿透参数
                    URL += "&City=" + recordset.Fields.Item("City").AsString;
                }
            }

            if (doDrilldown) {
                window.open(encodeURI(URL), "_blank"); //根据URL打开明细报表
            }
        }
        
        function ondblclickSubtotalCell(evt, cell) {
            var report = reportViewer.report,
                runningDetailGrid = report.RunningDetailGrid,
                recordset = runningDetailGrid.Recordset,
                crossCategoryID = report.DetailGrid.CrossTab.getClickedCellHCrossFieldValue("CategoryID"), //点击单元格对应的横向交叉字段值
                clickedRow = runningDetailGrid.getClickedRow(),  //最近点击行信息
                rowType = clickedRow.type,
                URL = getDrilldownBaseURL() + "&CategoryID=" + crossCategoryID,
                doDrilldown = true;

            if (rowType === "content") {
                //增加当前行对应的公司名称字段值作为穿透参数
                URL += "&CompanyName=" + recordset.Fields.Item("CompanyName").AsString;
            }
            else if (rowType === "groupheader") {
                doDrilldown = false; //没有对应穿透任务需要执行
            }
            else if (clickedRow.type === "groupfooter") {
                if (clickedRow.groupIndex === 0) {
                    //不需要设置额外的过滤参数
                }
                else if (clickedRow.groupIndex === 1) {
                    //增加当前分组项对应的城市字段值作为穿透参数
                    URL += "&City=" + recordset.Fields.Item("City").AsString;
                }
            }

            if (doDrilldown) {
                window.open(encodeURI(URL), "_blank"); //根据URL打开明细报表
            }
        }

        function ondblclickTotalCell(evt, cell) {
            var report = reportViewer.report,
                runningDetailGrid = report.RunningDetailGrid,
                recordset = runningDetailGrid.Recordset,
                clickedRow = runningDetailGrid.getClickedRow(),
                rowType = clickedRow.type,
                URL = getDrilldownBaseURL(),
                doDrilldown = true;

            if (rowType === "content") {
                //增加当前行对应的公司名称字段值作为穿透参数
                URL += "&CompanyName=" + recordset.Fields.Item("CompanyName").AsString;
            }
            else if (rowType === "groupheader") {
                doDrilldown = false; //没有对应穿透任务需要执行
            }
            else if (clickedRow.type === "groupfooter") {
                if (clickedRow.groupIndex === 0) {
                    //不需要设置额外的过滤参数
                }
                else if (clickedRow.groupIndex === 1) {
                    //增加当前分组项对应的城市字段值作为穿透参数
                    URL += "&City=" + recordset.Fields.Item("City").AsString;
                }
            }

            if (doDrilldown) {
                window.open(encodeURI(URL), "_blank"); //根据URL打开明细报表
            }
        }

        //根据数据过滤参数重新显示报表
        function btnRefresh_onclick() {
            var BeginDate = document.getElementById("txtBeginDate").value,
                EndDate = document.getElementById("txtEndDate").value,
                dataURL = "../../data/DataCenter.jsp?data=FilterCustomerProductCrosstab&BeginDate=" + BeginDate + "&EndDate=" + EndDate;

            reportViewer.stop();
            reportViewer.dataURL = encodeURI(dataURL);
            reportViewer.start();
        }

        function getDrilldownBaseURL() {
            return "Detail.jsp?BeginDate=" + document.getElementById("txtBeginDate").value +
                "&EndDate=" + document.getElementById("txtEndDate").value;
        }
    </script>
</head>
<body style="" onload="window_onload()">
    <div style="">
        <span>开始日期：</span>
        <input id="txtBeginDate" type="text" value="1997-1-1" name="txtBeginDate" maxlength="20" style="width: 84px" />
        <span>结束日期：</span>
        <input id="txtEndDate" type="text" value="1997-12-31" name="txtEndDate" maxlength="20" style="width: 80px" />
        <input id="btnRefresh" onclick="return btnRefresh_onclick()" type="button" value="更新显示" name="btnRefresh" />
    </div>
    <div id="report_holder">报表占位标签</div>
</body>
</html>
